<template>
  <div>
     <el-card>
      <div class="card-query">
        <div>
          <el-form class="form-query">
            <el-form-item>
              <el-input placeholder="关键字"></el-input>
            </el-form-item>
            <el-form-item class="btnQuery">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="handleQuery"
                >查找</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button
            icon="el-icon-refresh"
            type="primary"
            @click="handleRefresh"
            >刷新</el-button
          >
        </div>
      </div>
    </el-card>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Id" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.Id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章标题" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
           <el-button size="mini">发布</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <!-- <el-dialog title="文章内容" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="文章标题" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章简介" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章封面图" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
         <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-form-item>
        <el-form-item label="文章类型ID" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章作者" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      //对话框的表格
      form: {},
      tableData: [
        {
          Id: "1",
          name: "这也太难了",
        },
        {
          Id: "2",
          name: "晴天万里",
        },
        {
          Id: "3",
          name: "消失的故事",
        },
        {
          Id: "4",
          name: "不为人知的草坪",
        },
      ],
      formLabelWidth: "120px",
    };
  },
  methods: {
    //编辑
    handleEdit(index, row) {
      this.$router.push('/ArticleDetails');
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //确认
    confirm() {},
    //查找
    handleQuery(){},
    //添加
    handleAdd(){

    },
    //刷新
    handleRefresh(){},
  },
};
</script>

<style scoped>
.card-query,
.form-query {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnQuery {
  margin-left: 10px;
}
.form-query .el-form-item {
  margin-bottom: 0px;
}
</style>